
*{
    margin:0;
    padding:0;
}

body{
    background: #ebe8be;
    padding:0 10%;
}
nav ul{
    position: relative;
    display: block;
    margin: 50px auto;
    list-style: none;
    background: linear-gradient(to bottom, deepskyblue, blue);
    border-radius: 10px 10px 0 0;
    padding-left: 15px;
}
nav ul li{
    display: inline-block;
    margin-right: -8px;
}
nav ul li a:hover{
    color: #ffffff;
}
nav ul li a{
    padding:8px 20px;
    text-decoration: none;
    display: block;
    border-right:1px solid #7fc2dd;
    color: skyblue;
    font-family: 微软雅黑;
    font-size: 1.2em;
}
nav ul li:last-of-type a{
    border:none;
}

.cursor{
    position: absolute;
    top:-20px;
    left: 34px;
    background: rgba(159, 200, 230, 0.5);
    width:5em;
    height:80px;
    border-radius: 5px;
    /*opacity:0.3;*/
    transition: all 0.4s ease;
}
.cursor .top{/*上面的块*/
    position: absolute;
    width:100%;
    height: 20px;
    border-radius: 5px 5px 0 0;
    background:linear-gradient(to bottom, #e1f1fb,#86cff5) ;
    z-index: 10;
}
.cursor .bottom{/*下面的块*/
    position: absolute;
    bottom:0;
    width:100%;
    height: 20px;
    border-radius: 0 0 5px 5px;
    background:linear-gradient(to bottom, #86cff5, #7e94d3) ;
    /*z-index: 10;*/
}
.cursor .top:before{/*阴影*/
    content: "";
    position: absolute;
    width:100%;
    height: 20px;
    box-shadow: 1px 1px 6px #000;
    border-radius: 5px 5px  0 0;
    left:0;
}
.cursor .bottom:before{/*阴影*/
    content: "";
    position: absolute;
    width:100%;
    height: 20px;
    box-shadow: 1px 1px 6px #000;
    border-radius:  0 0 5px 5px;
    left:0;
    bottom:0;
}
.cursor .top:after{
    content: "";
    position: absolute;
    width:0;
    height: 0;
    /*以下三行是设置三角形的*/
    border-top: 12px solid #bdecf8;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    top: 20px;
    left:35%;
}
.cursor .bottom:after{
    content: "";
    position: absolute;
    width:0;
    height: 0;
    /*以下三行是设置三角形的*/
    border-bottom: 12px solid #bdecf8;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    bottom: 20px;
    left:35%;
}



/*动画*/
nav ul li:nth-of-type(1):hover ~ .cursor{
    transform: translate(0,0);
}
nav ul li:nth-of-type(2):hover ~ .cursor{
    left:150px;
}
nav ul li:nth-of-type(3):hover ~ .cursor{
    left:268px;
}
nav ul li:nth-of-type(4):hover ~ .cursor{
    left:386px;
}
nav ul li:nth-of-type(5):hover ~ .cursor{
    left:504px;
}
nav ul li:nth-of-type(6):hover ~ .cursor{
    left:622px;
}
li:first-child{

}


